<template>
    <div>
        <!-- 一个类似QQ音乐的纯色背景图选择！！！ -->
        <!-- 我的想法是这样的，需要将纯色背景颜色存在Vue的数组当中！ -->
        <div class="color_wrap">

            <div @dblclick="changeColor(color)" v-for="color,index in colorList" :key="index" class="color_item" :style="{backgroundColor:color}">
                <input type="radio" name="color">
            </div>

        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            colorList: [
            '#ECE2EB', '#F4E0EA', '#EFC9D6', '#EFB1C7', '#FCD97D',
            '#EDEDEE', '#E8E3EC', '#D9BCD6', '#9B6F89', '#A1608C',
            '#A1A3B4', '#B1A9B9', '#BCA3AF', '#D5B7B6', '#E6D4CB',
            ' #CBE0F4', '#9BC4E0', '#E5E1EB' ,'#E3D7E6', '#C7C9E0',
            '#F5D8C8', '#DFE2E3', '#C6CCDF', '#ACBEDD', '#709ED0',
            '#DFEAA6', '#96B23C', '#628D3D', '#F2CEDD', '#665048',
            '#DDDADD', '#DCB8A5', '#CE9E96', '#D58677', '#C87452',
            '#F1A183', '#ED884C', '#E64F25', '#BD2630', '#991B27'
            ],//颜色盘
        }
    },
    methods:{
        changeColor(color){
            this.$bus.$emit("changeColor",color)
        }
    }
}
</script>

<style scoped lang="less">
.color_wrap {
    padding: 0px 60px;
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    grid-template-rows: repeat(6, 1fr);
    gap: 20px 40px;

    @media screen and (max-width: 1200px){
        &{
            grid-template-columns: repeat(4, 1fr);  
        }
    }
    .color_item {
        height: 40px;
        width: 100px;
        border-radius: 10px;

        input[type='radio'] {
            width: 100%;
            height: 100%;
            appearance: none;
        }
    }
}
</style>
